<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>客服端</title>
	<script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>
  </head>
  <body id="body">
  	当前客服<br/>
				<input type="hidden" name="sid"/>
				<input type="hidden" id="sname" value="${server.sname }"/>
				  	name:${server.sname}
  		<script type="text/javascript" language="javascript">
    	function closes(user){
    		$("#userDiv"+user).remove(); 
    		$.post("<%=basePath%>chat_delUserMessage.action",{user:encodeURIComponent(user)},function(d){
    		});
    	}
    	function add(user){
    		$("#userDiv"+user).css({"height":"350px","overflow-y":" scroll"}); 
    	}
    	function sml(user){
    		$("#userDiv"+user).css({"height":"25px","overflow-y":" scroll"}); 
    	}
    	function updateMessage(message,user){
    		var userMessage = "#message"+user;
    		$(userMessage).append(message);
    	}
    </script>
		<c:forEach items="${map}" var="mes">
				<script type="text/javascript" language="javascript">
					if(document.getElementById('userDiv${mes.key}') == null){
						//添加一个用户的信息div
						$("#body").append("<div id='userDiv${mes.key}' style='border:groove #ff00ff;height:350px;overflow-y:scroll'></div>");
						//添加放大缩小和关闭
						$("#userDiv${mes.key}").append("<img onclick=showMessage('${mes.key}') title='刷新聊天信息' src='<%=basePath%>images/ref.jpg'/><button style='float: right;width: 25px;height: 25px' onclick=closes('${mes.key}') >X</button><button style='float: right;width: 25px;height: 25px' onclick=sml('${mes.key}')>_</button><button style='float: right;width: 25px;height: 25px' onclick=add('${mes.key}')>+</button>");
						//添加一个信息的div
						$("#userDiv${mes.key}").append("<div id='message${mes.key}' style='overflow-y: scroll'></div>");
					}
				</script>
					<c:forEach items="${mes.value }" var="str">
						<script type="text/javascript" language="javascript">
							//显示聊天信息
							updateMessage('${str }','${mes.key}');
						</script>
					</c:forEach>
					<script>
					if(document.getElementById('divdow${mes.key}') == null){
						//添加一个输入框
						$("#userDiv${mes.key}").append("<div class='divdow${mes.key}'><span><input id='rcontext${mes.key}' type='text'/><button onclick=sub('${mes.key}') style='height: 25px'>&nbsp;回答&nbsp;</button><input type='hidden' value='${mes.key}'/></span></div>");
					}
					</script>
		</c:forEach>
		<script type="text/javascript">
   		function sub(user){
   			var rcontext = $("#rcontext"+user).val();
   			var sname = $("#sname").val();
   			if(rcontext != ""){
  				$.post("<%=basePath%>chat_question.action",{sname:encodeURIComponent(sname),replyMessage:encodeURIComponent(rcontext),user:encodeURIComponent(user)},function(d){
  					$("#message").html(d);
  				});
  			}
  		}
  		function showMessage(user){
		  	$.post("<%=basePath%>chat_reqUser.action",{user:encodeURIComponent(user)}, function(html){
				    $("#message"+user).html(html);
			  }); 
  		}
   	</script>
  </body>
</html>
